<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Comic Page Navigation Demo</title>
<style type="text/css">
.img-show {
  width:400px;
  margin:50px auto;
  background-color:black;
  border:2px solid black;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  position:relative;
  overflow:hidden;
}

.img-show .img-holder {
  background-color:white;
}

.img-show .img-holder.loading {
  background:white url(http://komik.bloganeh.com/img/ajax_loading.gif) no-repeat 50% 300px;

}

.img-show .img-holder img {
  display:block;
}

.img-show .img-nav {
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

.img-show .img-nav li {
  margin:2px 2px 0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  list-style:none;
}

.img-nav li a {
  display:block;
  background-color:#ccc;
  color:black;
  padding:3px 7px;
  font:normal 12px Georgia,Serif;
  font-style:italic;
  text-decoration:none;
}

.img-nav li a.active {
  background-color:#900;
  color:white;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
//<![CDATA[
$(function() {
    $('.img-gallery').each(function() {
        var w = $(this).data("width"),
            h = $(this).data("height"),
            viewport = $('html, body'),
            fadeSpeed = 400, // Kecepatan efek fading
            resizeSpeed = 600; // Kecepatan efek pelebaran/penyusutan
        $(this).addClass('img-nav').wrap('<div class="img-show" style="width:' + w + 'px;"></div>');
        var $firstNav = $('li:first a', this),
            current = $firstNav.attr('href'),
            $parent = $(this).parents('.img-show');
        $firstNav.addClass('active');
        $parent.prepend('<div class="img-holder" style="height:' + h + 'px;"></div>');
        $parent.find('.img-holder').addClass('loading').html('<img class="transparent" src="' + current + '" alt="Loading..."/>');
        $parent.find('img.transparent').css('opacity', 0).load(function() {
            $parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {
                $(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);
            });
        });
        
        $('a', this).each(function(i) {
            i = i+1;
            $(this).attr("title", $(this).text());
            $(this).html(i);
        }).on("click", function() {
            var $activeNav = $(this).parents('.img-gallery').find('a.active'),
                $activeParent = $(this).parents('.img-show');
            $activeNav.removeClass('active');
            viewport.scrollTop($activeParent.offset().top-40);
            $(this).addClass('active').parents('.img-show').find('.img-holder').html('<img class="transparent" src="' + this.href + '" alt="Loading..."/>');
            $parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {
                $parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {
                    $(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);
                });
            });
            return false;
        });

    });
});
//]]>
</script>
</head>

<body>
<ul class="img-gallery" data-width="800" data-height="1000">
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/1.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/2.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/3.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/4.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/5.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/6.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/7.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/8.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/9.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/10.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/11.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/12.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/13.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/14.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/15.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/16.jpg"></a></li>
<li><a href="http://s09.mpcdn.net/manga/p/739/504213/17.jpg"></a></li>
</ul>
</body>
</html>